<template>
  <view class="bindingApplicationForm">
    <mescroll-uni
      ref="mescrollRef"
      :down="downOption"
      :up="upOption"
      height="100%"
      @down="downCallback"
      @emptyclick="emptyClick"
      @init="mescrollInit"
      @up="upCallback"
    >
      <u-cell-group v-for="(item, index) in goods" :key="index">
        <view class="u-cell-group" @click="bind_appli_form(item.id)">
          <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" hover-class="none">
            <view slot="title">
              <text class="title">{{$t('申请单名称')}}：</text>
              <u-tag :text="item.title" mode="dark" />
            </view>
          </u-cell-item>
          <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" hover-class="none">
            <view slot="title">
              <text class="title">{{$t('用章人')}}：</text>
              <text class="title">{{ item.userName }}</text>
            </view>
          </u-cell-item>
          <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" hover-class="none">
            <view slot="title">
              <text class="title">{{$t('日期')}}：</text>
              <text class="title">{{ item.time }}</text>
            </view>
          </u-cell-item>
        </view>
      </u-cell-group>
    </mescroll-uni>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js'

export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  data() {
    return {
      infoId: '',
      downOption: {
        auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: `~ ${this.$t('暂无数据')} ~`,
          fixed: true,
          top: '200rpx'
        },
        textNoMore: `-- ${this.$t('触底了')} --`
      },
      goods: [] //列表数据
    }
  },
  onLoad(op) {
    uni.setNavigationBarTitle({ title: this.$t('绑定申请单') })
    try {
      this.infoId = JSON.parse(decodeURIComponent(op.infoId))
    } catch (e) {
      this.infoId = JSON.parse(op.infoId)
    }
  },
  methods: {
    /*下拉刷新的回调 */
    downCallback() {
      this.goods = []
      // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
      // loadSwiper();
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll()
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //获取申请单列表
      this.getBySealRecordInfoToBind(page)
    },
    //获取申请单列表
    getBySealRecordInfoToBind(page) {
      let req = {
        pageSize: page.size, //每页的数量
        pageNum: page.num, // 当前显示第几页
        sealRecordInfoId: this.infoId,
        page: true
      }
      //章的接口
      this.$u
        .post(this.api.GLOBAL_application_getBySealRecordInfoToBind, req)
        .then((res) => {
          if (page.num === 1) {
            this.goods = []
          }
          if (res.code === 200 && res.data && res.data.list) {
            this.mescroll.endBySize(res.data.list.length, res.data.total)
            this.goods = this.goods.concat(res.data.list)
          } else {
            this.mescroll.endBySize(0, 0)
            this.goods = []
          }
        })
        .catch((err) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },
    //绑定
    bind_appli_form(id) {
      uni.showModal({
        title: this.$t('提示'),
        content: this.$t('您正在执行绑定此申请单的操作，是否确认'),
        success: (res) => {
          if (res.confirm) {
            let req = {
              applicationId: id,
              sealRecordInfoId: this.infoId
            }
            this.$u.get(this.api.GLOBAL_sealRecordInfo_banding, req).then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: this.$t('绑定成功'),
                  icon: 'success',
                  duration: 5000
                })
                setTimeout((res) => {
                  uni.navigateBack({
                    delta: 1
                  })
                  //更新上一页的数据
                  uni.$emit('bindingApplicationFormToApplicationList', true)
                }, 2000)
              }
            })
          } else if (res.cancel) {
          }
        }
      })
    },
    //点击空布局按钮的回调
    emptyClick() {
      uni.showToast({
        title: 'emptyClick'
      })
    }
  }
}
</script>
<style lang="scss">
.bindingApplicationForm {
  background-color: #f0f0f0;
  height: 100%;

  .u-cell-group {
    padding: 20rpx 0;
    box-sizing: border-box;

    .u-cell-item {
      padding: 0 32rpx;
    }
  }
}
</style>
